import { del, getArticleList } from '@/store/actions/article'
import {
  Card,
  Breadcrumb,
  Form,
  Radio,
  // Select,
  DatePicker,
  Button,
  Table,
  Tag,
  Space,
  Image,
  Popconfirm,
  message,
} from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
import { useEffect, useRef } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { Link, useHistory } from 'react-router-dom'
import img from '@/assets/error.png'
// import { useChannels } from '@/hooks'
import Channels from '@/components/Channels'
const { RangePicker } = DatePicker
// const { Option } = Select

export default function Article() {
  const dispatch = useDispatch()
  const history = useHistory()
  // const channels = useSelector((state) => state.article.channels)
  // const channels = useChannels()
  const articles = useSelector((state) => state.article.articles)
  const dataSource = articles.results
  useEffect(() => {
    // dispatch(getChannelList())
    dispatch(getArticleList())
  }, [dispatch])

  const params = useRef({})

  const finish = (values) => {
    // console.log(values)
    // const params = {}
    if (values.status !== -1) {
      params.current.status = values.status
    } else {
      // params.current.status = null
      delete params.current.status
    }
    params.current.channel_id = values.channel_id
    if (values.date) {
      params.current.begin_pubdate = values.date[0]
        .startOf('day')
        .format('YYYY-MM-DD HH:mm:ss')
      params.current.end_pubdate = values.date[1]
        .endOf('day')
        .format('YYYY-MM-DD HH:mm:ss')
    } else {
      // params.current.begin_pubdate = null
      // params.current.end_pubdate = null
      delete params.current.begin_pubdate
      delete params.current.end_pubdate
    }
    params.current.page = 1
    dispatch(getArticleList(params.current))
  }
  // 删除
  const confirm = async (id) => {
    await dispatch(del(id))
    await dispatch(getArticleList(params.current))
    message.success('删除文章成功')
  }

  const STATE = [
    { id: -1, title: '全部', color: 'magenta' },
    { id: 0, title: '草稿', color: 'red' },
    { id: 1, title: '待审核', color: 'red' },
    { id: 2, title: '审核通过', color: 'lime' },
    { id: 3, title: '审核失败', color: 'gold' },
  ]
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      render: (cover) => {
        if (cover.type === 0) {
          return <Image width={200} height={150} src={img}></Image>
        } else {
          return (
            <Image
              src={cover.images[0]}
              width={200}
              height={150}
              fallback={img}
            ></Image>
          )
        }
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '状态',
      dataIndex: 'status',
      render: (value) => {
        // console.log(value)
        const obj = STATE.find((item) => item.id === value)
        return <Tag color={obj.color}>{obj.title}</Tag>
      },
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
    },
    {
      title: '操作',
      dataIndex: 'id',
      render: (id) => {
        return (
          <Space>
            <Button
              shape="circle"
              onClick={() => history.push(`/home/publish/${id}`)}
              type="primary"
              icon={<EditOutlined />}
            />
            <Popconfirm
              title="你确定要删除该条数据吗?"
              onConfirm={() => confirm(id)}
            >
              <Button shape="circle" type="danger" icon={<DeleteOutlined />} />
            </Popconfirm>
          </Space>
        )
      },
    },
  ]
  return (
    <div className="root">
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>内容管理</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form onFinish={finish} initialValues={{ status: -1 }}>
          <Form.Item label="状态" name="status">
            <Radio.Group>
              {STATE.map((item) => (
                <Radio key={item.id} value={item.id}>
                  {item.title}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>
          <Form.Item label="频道" name="channel_id">
            <Channels></Channels>
            {/* <Select placeholder="请选择频道" allowClear>
              {channels.map((item) => (
                <Option key={item.id} value={item.id}>
                  {item.name}
                </Option>
              ))}
            </Select> */}
          </Form.Item>
          <Form.Item label="日期" name="date">
            <RangePicker size="large" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
      </Card>
      <Card
        style={{ marginTop: 10 }}
        title={`根据筛选条件共查询到${articles.total_count}条结果`}
      >
        <Table
          rowKey="id"
          dataSource={dataSource}
          columns={columns}
          pagination={{
            total: articles.total_count,
            pageSize: articles.per_page,
            current: articles.page,
            onChange: (page, pageSize) => {
              if (pageSize !== articles.per_page) {
                params.current.per_page = pageSize
                params.current.page = 1
              } else {
                params.current.page = page
              }
              dispatch(getArticleList(params.current))
            },
          }}
        />
      </Card>
    </div>
  )
}
